<!doctype html>
<html>
<head>
  <title>Network | Cursor Change</title>

  <script type="text/javascript" src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>

<p>Here is a simple network with nodes and edges that demonstrates how to change the cursor on hover for nodes and edges.</p>
<p>Use the dropdowns and button below to change the cursor type bound to an event.</p>
<div>
Event Type -
<select id="eventType">
	<option value="hoverNode">hoverNode</option>
	<option value="blurNode">blurNode</option>
	<option value="hoverEdge">hoverEdge</option>
	<option value="blurEdge">blurEdge</option>
	<option value="dragStart">dragStart</option>
	<option value="dragging">dragging</option>
	<option value="dragEnd">dragEnd</option>
</select>
&nbsp;
Cursor Type -
<select id="cursorType">
	<option value="auto">auto</option>
	<option value="default">default</option>
	<option value="context-menu">context-menu</option>
	<option value="help">help</option>
	<option value="pointer">pointer</option>
	<option value="progress">progress</option>
	<option value="wait">wait</option>
	<option value="cell">cell</option>
	<option value="crosshair">crosshair</option>
	<option value="text">text</option>
	<option value="vertical-text">vertical-text</option>
	<option value="alias">alias</option>
	<option value="copy">copy</option>
	<option value="move">move</option>
	<option value="no-drop">no-drop</option>
	<option value="not-allowed">not-allowed</option>
	<option value="all-scroll">all-scroll</option>
	<option value="col-resize">col-resize</option>
	<option value="row-resize">row-resize</option>
	<option value="n-resize">n-resize</option>
	<option value="e-resize">e-resize</option>
	<option value="w-resize">w-resize</option>
	<option value="s-resize">s-resize</option>
	<option value="ne-resize">ne-resize</option>
	<option value="nw-resize">nw-resize</option>
	<option value="se-resize">se-resize</option>
	<option value="sw-resize">sw-resize</option>
	<option value="ew-resize">ew-resize</option>
	<option value="ns-resize">ns-resize</option>
	<option value="nesw-resize">nesw-resize</option>
	<option value="nwse-resize">nwse-resize</option>
	<option value="zoom-in">zoom-in</option>
	<option value="zoom-out">zoom-out</option>
	<option value="grab">grab</option>
	<option value="grabbing">grabbing</option>
</select>
&nbsp;

<button onClick="changeEventCursor(document.getElementById('eventType').value,document.getElementById('cursorType').value);">Change Cursor for Event</button>
</div>
<div id="mynetwork"></div>

<script type="text/javascript">
  // create an array with nodes
  var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ]);

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
  ]);

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {interaction:{hover:true}};
  var network = new vis.Network(container, data, options);

  //Get the canvas HTML element
  var networkCanvas = document.getElementById("mynetwork").getElementsByTagName("canvas")[0]
  function changeCursor(newCursorStyle){
	networkCanvas.style.cursor = newCursorStyle;
  }
  function changeEventCursor(eventName,cursorType){ 
    network.on(eventName, function() {
      changeCursor(cursorType);
    });
  }
  network.on('hoverNode', function () {
	changeCursor('grab');
  });
  network.on('blurNode', function () {
	changeCursor('default');
  });
  network.on('hoverEdge', function () {
	changeCursor('grab');
  });
  network.on('blurEdge', function () {
	changeCursor('default');
  });
  network.on('dragStart', function () {
	changeCursor('grabbing');
  });
  network.on('dragging', function () {
	changeCursor('grabbing');
  });
  network.on('dragEnd', function () {
	changeCursor('grab');
  });

</script>

</body>
</html>

